import React, { Suspense } from 'react';
import PageLoading from '@/components/PageLoading';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { Button, Card, DatePicker, Form, Input, Table } from 'antd';
import { connect } from 'dva';
import moment from 'moment';
import KnowledgeReadOnly from '@/pages/KnowledgeManagement/Overview/EditingKnowledge/knowledgeReadOnly';
import EditingKnowledge from '@/pages/KnowledgeManagement/Overview/EditingKnowledge/editingKnowledge';

const { RangePicker } = DatePicker;

class AmendantRecord extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      queryData: {
        current: 1,
        size: 10,
        from: '',
        to: '',
        userQuery: '',
        qaQuery: ''
      },
      list: [],
      total: 0,
      loading: true
    }
  }

  componentWillMount() {
    let { queryData } = this.state;
    queryData.from = moment().subtract('7', 'days').format('YYYY-MM-DD');
    queryData.to = moment().format('YYYY-MM-DD');
    this.setState({
      queryData
    })
  }

  componentDidMount() {
    this.getList();
  }

  /**
   * 获取列表数据
   */
  getList = () => {
    const { queryData } = this.state;
    const { dispatch } = this.props;
    this.setState({ loading: true }, () => {
      dispatch({
        type: 'amendantRecord/fetch',
        payload: queryData,
        callback: res => {
          this.setState({
            list: res.records,
            total: res.total,
            loading: false
          })
        },
      });
    })
  }

  /**
   * 查询
   */
  queryByCondition = () => {
    let { queryData } = this.state;
    const { form } = this.props;
    const info = form.getFieldsValue();
    queryData.current = 1;
    console.log(info);
    queryData.from = info.time[0].format('YYYY-MM-DD');
    queryData.to = info.time[1].format('YYYY-MM-DD');
    queryData.userQuery = info.userQuery;
    queryData.qaQuery = info.qaQuery;
    this.setState({ queryData }, () => {
      this.getList()
    })
  }

  /**
   * 分页
   */
  queryByPage = (page, size) => {
    let { queryData } = this.state;
    queryData.current = page;
    queryData.size = size;
    this.setState({ queryData }, () => {
      this.getList()
    })
  }

  /**
   * 打开知识点详情页
   */
  openDetail = dataJson => {
    this.KnowledgeReadOnly.setValueByDataJson(dataJson);
  }

  /**
   * 打开创建知识点页
   */
  openCreateModal = (basicQuestion, questions) => {
    this.EditingKnowledge.showEditDrawerFromAmendantRecord(basicQuestion, questions)
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const { loading, total, queryData, list } = this.state;
    const columns = [
      {
        title: '知识点ID',
        dataIndex: 'qaId',
        key: 'qaId',
        width: 200
      },
      {
        title: '知识点',
        dataIndex: 'qaName',
        key: 'qaName',
        width: 200
      },
      {
        title: '操作时间',
        dataIndex: 'updateTime',
        key: 'updateTime',
        width: 200,
        render: text => {
          if (text) {
            return moment(text).format('YYYY-MM-DD')
          }
        }
      },
      {
        title: '操作人',
        dataIndex: 'nick',
        key: 'nick',
        width: 200
      },
      {
        title: '操作',
        dataIndex: 'operationType',
        key: 'operationType',
        width: 150,
        render: text => {
          let operation = ''
          switch (text) {
            case 1:
              operation = '新增';
              break;
            case 2:
              operation = '编辑';
              break
            case 3:
              operation = '删除';
              break;
          }
          return operation;
        }
      },
      {
        title: '操作后版本',
        width: 150,
        render: (text, row) => {
          return <Button type={'link'} onClick={() => this.openDetail(row.dataJson)}>查看详情</Button>
        }
      },
    ]
    return (
      <Suspense fallback={<PageLoading />}>
        <PageHeaderWrapper>
          <Card>
            <div>
              <Form layout={'inline'}>
                <Form.Item>
                  {
                    getFieldDecorator('time', {
                      initialValue: [moment(moment().subtract('7', 'days')), moment(moment()),]
                    })(
                      <RangePicker allowClear={false} />
                    )
                  }
                </Form.Item>
                <Form.Item>
                  {
                    getFieldDecorator('userQuery')(
                      <Input placeholder={'请输入操作人用户名/昵称'} style={{ width: 250 }} />
                    )
                  }
                </Form.Item>
                <Form.Item>
                  {
                    getFieldDecorator('qaQuery')(
                      <Input placeholder={'请输入问题/知识点ID'} />
                    )
                  }
                </Form.Item>
                <Form.Item>
                  <Button type={'primary'} onClick={this.queryByCondition}>查询</Button>
                </Form.Item>
              </Form>
            </div>
            <div style={{ margin: '10px 0' }}>
              <Table
                rowKey={'id'}
                columns={columns}
                dataSource={list}
                loading={loading}
                scroll={{ x: 1000, y: 850 }}
                pagination={{
                  total,
                  current: queryData.current,
                  onChange: this.queryByPage,
                  showQuickJumper: true,
                  showSizeChanger: true,
                  onShowSizeChange: this.queryByPage
                }}
              />
            </div>
            <KnowledgeReadOnly
              onRef={ref => this.KnowledgeReadOnly = ref}
              openCreateModal={this.openCreateModal}
            />
            <EditingKnowledge
              onRef={ref => this.EditingKnowledge = ref}
              refreshList={this.getList}
            />
          </Card>
        </PageHeaderWrapper>
      </Suspense>
    );
  }
}

export default connect(({ user }) => ({
  // 全局数据
  currentUser: user.currentUser,
}))(Form.create()(AmendantRecord));
